<template>
  <div v-if="isAuth('tenant:tenantInfo:info')" :class='{"mod-demo-echarts":bge === 1,"mod-demo-echartsee":bge === 2}'>
    <!-- 头部 -->
    <div class="demo-header">
      <div @click="clickPersonnel()" :class='{"div-buttona":headera ===1, "div-buttonb":headera ===2}'><el-button type="text">人员证书</el-button></div>
      <div @click="clickEnterprise()" :class='{"div-buttona":headerb ===1, "div-buttonb":headerb ===2}'><el-button type="text">企业证书</el-button></div>
      <div @click="clickMessage()" :class='{"div-buttona":headerc ===1, "div-buttonb":headerc ===2}'><el-button type="text">员工画像</el-button></div>
    </div>
    <!-- 人员证书 -->
    <div v-show="personnelEdit">
    <div v-show="personnelEdit">
    <!-- 上半部分 -->
      <div class="demo-top">
        <div class="certificateType">
         <div v-show="EditCost">
           <div class="kind" ref="zhonglei"><div class="biaoshi"></div> 证书种类</div>
           <div class="certificateType-es" ref="mycertificateType"></div>
         </div>
         <div class="xiazuan-div" v-show="!EditCost">
          <!-- <div class="kind-wtf" ref="zhongleizhengshu">123</div> -->
          <div class="kind-zhong" ref="zhonglei"><div class="biaoshi"></div>证书种类</div><el-button class="return-es" type="text" @click="clickTs()">返回上级</el-button>
         <div class="certificateType-es">
          <el-table
            :data="tableisData"
            style="width: 100%"
            :max-height="tableHeightCode"
            :header-cell-style="{background:'transparent',color:'#3EBDFF'}"
            >
            <el-table-column
              prop="date"
              type="index"
              label="序列"
              align="center"
              width="50">
            <template slot-scope="scope">
            <span v-if="scope.$index == '0'">
              <img src="~@/assets/img/jin.png" alt="">
            </span>
            <span v-else-if="scope.$index == '1'">
              <img src="~@/assets/img/yin.png" alt="">
            </span>
            <span v-else-if="scope.$index == '2'">
               <img src="~@/assets/img/tong.png" alt="">
            </span>
            <span v-else>
              {{scope.$index+1}}
            </span>
            </template>
            </el-table-column>
            <el-table-column
            :show-overflow-tooltip="true"
              prop="idType"
              align="center"
              label="证书专业">
            </el-table-column>
            <el-table-column
              prop="count"
              label="数量(本)"
              align="center"
              width="80">
            </el-table-column>
          </el-table>
         </div>
         </div>
        </div>
       <div class="warning" ref="myWarning">
         <!-- 到期预警 -->
        <div @click="clickWaringA()" :class='{"waring-a":waringA ==1,"waring-b":waringA ==2,"waring-d":waringA ==4,"waring-e":waringA ==5}'
        >
         <div class="waring-is">
           <h2>{{this.certificateCount}}</h2>
         </div>
         <span>到期预警</span>
       </div>
       <!-- 归还预警 -->
       <div @click="clickWaringB()" :class='{"waring-a":waringB ==1,"waring-b":waringB ==2,"waring-d":waringB ==4,"waring-e":waringB ==5}'>
       <div class="waring-is">
            <h2>{{this.transactionCount}}</h2>
       </div>
         <span>借还预警</span>
         </div>
        <div @click="clickWaringD()" :class='{"waring-a":waringD ==1,"waring-b":waringD ==2,"waring-d":waringD ==4,"waring-e":waringD ==5}'>
       <div class="waring-is">
           <h2>{{this.borrowOutCounted}}</h2>
       </div>
         <span>挂出预警</span>
       </div>
       <!-- 挂入预警 -->
       <div @click="clickWaringE()" :class='{"waring-a":waringE ==1,"waring-b":waringE ==2,"waring-d":waringE ==4,"waring-e":waringE ==5}'>
       <div class="waring-is">
           <h2>{{this.borrowInCount}}</h2>
       </div>
         <span>挂入预警</span>
         </div>
       </div>
      <div class="certificateState">
       <div>
          <div class="kind"><div class="biaoshi"></div>证书状态</div>
          <!-- 第一 -->
          <div class="certificateState-iop">
          <div class="certificateState-es" v-if="myStates" ref="mycertificateState">
          <div class="state-a" @click="clickPathA()">
            <div class="state-as" ref="myStatea"></div>
            <div class="kongxian">
            <div>空闲 {{this.noUseCount}}</div>
              </div>
            </div>
            <div class="state-a" @click="clickPathL()">
            <div class="state-bs" ref="myStatetop"></div>
            <div class="kongxian">
              <div>挂入  {{this.borrowInCounts}}</div>
              </div>
            </div>
          <div class="state-a" @click="clickPathB()">
            <div class="state-bs" ref="myStateb"></div>
            <div class="kongxian">
              <div>挂出  {{this.borrowOutCount}}</div>
              </div>
            </div>
            <div class="state-a" @click="clickPathM()">
            <div class="state-bs" ref="myStatebop"></div>
            <div class="kongxian">
              <div>挂还  {{this.borrowInReturnCounts}}</div>
              </div>
            </div>
          </div>
          <!-- 第二 -->
          <div class="certificateState-ess" v-if="myStatese" ref="mycertificateStates">
           <div class="state-a" @click="clickPathC()">
            <div class="state-as" ref="myStatec"></div>
            <div class="kongxian">
            <div>投标  {{this.bidUsedCount}}</div>
              </div>
            </div>
          <div class="state-a" @click="clickPathD()">
            <div class="state-bs" ref="myStated"></div>
            <div class="kongxian">
             <div>中标  {{this.bidSuccessCount}}</div>
              </div>
            </div>
          <div class="state-a" @click="clickPathE()">
            <div class="state-bs" ref="myStatee"></div>
            <div class="kongxian">
             <div>项目  {{this.projectCount}}</div>
              </div>
            </div>
          <div class="state-a" @click="clickPathF()">
            <div class="state-bs" ref="myStatef"></div>
            <div class="kongxian">
            <div>其他  {{this.OtherCount}}</div>
              </div>
            </div>
          </div>
          <div class="qiehuan">
            <div :class='{"qieuanone":kiveqie == 1, "qieuanone-s":kiveqie == 2}' @click="clickOnes()"></div>
            <div :class='{"qiehuantou":kivetou == 1, "qiehuantou-s":kivetou == 2}' @click="clickTwos()"></div>
          </div>
          </div>
         </div>
      </div>
      </div>
      <!-- 下半部分 -->
      <div class="demo-buttom">
        <div class="cost" ref="costss">
        <div>
           <div class="kind"><div class="biaoshi"></div>费用统计</div>
           <div class="cost-es" ref="myCost"></div>
         </div>
        </div>
        <div class="certificateWarning">
         <div>
           <div class="kind-e">
             <div class="kind-s" ref="myKinds">
             <div class="biaoshi"></div>证书预警
             </div>
            <div class="select-kind">
              <el-button v-if="this.waringA ==1" @click="clickExpire()" size="small" :class='{"buttonKind-a":buttonKindA==1,"buttonKind-active":buttonKindA==2}' type="text">已到期</el-button>
              <el-button v-if="this.waringA ==1" @click="clickOne()" size="small" :class='{"buttonKind-b":buttonKindB==1,"buttonKind-bctive":buttonKindB==2}' type="text">一月内</el-button>
              <el-button v-if="this.waringA ==1" @click="clickThree()" size="small" :class='{"buttonKind-c":buttonKindC==1,"buttonKind-cctive":buttonKindC==2}' type="text">三月内</el-button>
              <el-button v-if="this.waringA ==1" @click="clickQuan()" size="small" :class='{"buttonKind-q":buttonKindQ==1,"buttonKind-qctive":buttonKindQ==2}' type="text">全部</el-button>

              <el-button v-if="this.waringA !==1" @click="clickYi()" size="small" :class='{"buttonKind-a":buttonKindG==1,"buttonKind-active":buttonKindG==2}' type="text">已逾期</el-button>
              <el-button v-if="this.waringA !==1" @click="clickSan()" size="small" :class='{"buttonKind-c":buttonKindF==1,"buttonKind-cctive":buttonKindF==2}' type="text">三天内</el-button>
              <el-button v-if="this.waringA !==1" @click="clickQi()" size="small" :class='{"buttonKind-b":buttonKindE==1,"buttonKind-bctive":buttonKindE==2}' type="text">七天内</el-button>
              <el-button v-if="this.waringA !==1" @click="clickBan()" size="small" :class='{"buttonKind-c":buttonKindD==1,"buttonKind-cctive":buttonKindD==2}' type="text">半月内</el-button>
              <el-button v-if="this.waringA !==1" @click="clickQuanEr()" size="small" :class='{"buttonKind-q":buttonKindQ==1,"buttonKind-qctive":buttonKindQ==2}' type="text">全部</el-button>

            </div>
           </div>
           <div class="certificateWarning-tab">
            <el-table
            :data="tableData"
            style="width: 100%"
            :highlight-current-row="false"
            :max-height="tableHeight"
            :header-cell-style="{background:'transparent',color:'#3EBDFF'}"
            >
            <el-table-column
              prop="name"
              label="姓名"
              min-width="100">
            </el-table-column>
            <el-table-column
            :show-overflow-tooltip="true"
              prop="profession"
              min-width="100"
              label="证书专业">
            </el-table-column>
            <el-table-column
            :show-overflow-tooltip="true"
              min-width="100"
              prop="certificateNo"
              label="证书编号">
            </el-table-column>
            <el-table-column
              v-if="this.waringA== 1"
              min-width="100"
              prop="validityEndTime"
              label="到期日期">
            </el-table-column>
            <el-table-column
              v-if="this.waringA!== 1"
              min-width="100"
              prop="transactionEndTime"
              label="到期日期">
            </el-table-column>
          </el-table>
           </div>
         </div>
        </div>
        <div class="statistics">
        <div>
           <div class="kind"><div class="biaoshi"></div>证书统计</div>
           <div id="chartPie" class="pie-wrap"></div>
         </div>
        </div>
        </div>
    </div>
    </div>
    <!-- 企业证书 -->
    <div v-if="enterpriseEdit">
      <home-enterprise v-show="enterpriseEdit"></home-enterprise>
    </div>
    <div v-if="messageEdit">
      <home-hon v-show="messageEdit"></home-hon>
    </div>
    <el-dialog
      title=""
      :visible.sync="newMsgDialogVisible"
      width="35%">
      <div slot="title" ><icon class="el-icon-warning" style="color: #E96E6E;font-size: 18px;margin-right: 10px"></icon><span style="font-size: 18px;font-weight: bold">跟进超时</span></div>
      <div v-if="noticeList.length !==0" class="msg-container">
        <div class="msg-item" v-for="item in noticeList">
          <div class="msg-content">
            <div class="title">
              {{item.content}}
            </div>
            <div class="other">
              {{item.createTime}}
            </div>
          </div>
          <div @click="clickTurnToNotice" class="msg-detail"><el-icon  class="el-icon-arrow-right" style="font-size: 24px"></el-icon></div>
        </div>
      </div>
      <div style="display: flex;justify-content: center;align-items: center;font-size: 16px;font-weight: 500;letter-spacing: 2px;" v-else><span>暂无跟进超时信息</span></div>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="newMsgDialogVisible = false">确 认</el-button>
    </span>
    </el-dialog>
    </div>
      <!-- 企业证书下半部分 -->

</template>

<script>
  // import Vue from 'vue'
  import echarts from 'echarts'
  import 'echarts/lib/component/title'
  import HomeEnterprise from './home-se'
  import HomeHon from './home-hon'
  import {getNoticeList} from '../../api/notice/notice'
  import {isAuth} from '../../utils'
require('echarts/theme/macarons')
export default {
    data () {
      return {
        newMsgDialogVisible: false,
        value: '1',
        chart: null,
        kiveqie: 1,
        kivetou: 2,
        personnelEdit: true,
        enterpriseEdit: false,
        messageEdit: false,
        myStates: true,
        myStatese: false,
        chartPie: null,
        EditHonor: true,
        skipPathA: true,
        skipPathB: true,
        skipPathC: true,
        skipPathD: true,
        skipPathE: true,
        skipPathF: true,
        skipPathL: true,
        skipPathM: true,
        skipParamA: true,
        skipParamB: true,
        skipParamC: true,
        // 过期
        expired: '',
        // 未过期
        notExpired: '',
        // 三个月内
        threeMonths: '',
        waringA: 1,
        waringB: 2,
        // waringC: 3,
        waringD: 4,
        waringE: 5,
        waringG: 1,
        waringH: 4,
        bge: 1,
        buttonKindA: 1,
        buttonKindB: 1,
        buttonKindC: 1,
        buttonKindD: 1,
        buttonKindE: 1,
        buttonKindF: 1,
        buttonKindG: 1,
        buttonKindQ: 2,
        headera: 1,
        headerb: 2,
        headerc: 2,
        zong: '',
        borrowOutCounted: '',
      // 挂入预警
        borrowInCount: '',
      // 挂出
        borrowOutCount: '',
      // 证书状态
        certificateCount: '',
      // 借出
        transactionCount: '',
      // 归回
        transactionReturnCount: '',
        honorCertiCount: '',
        isoCertiCount: '',
        otherCertiCount: '',
        qualiCertiCount: '',
        qualiCertiPercent: '',
        honorCertiPercent: '',
        isoCertiPercent: '',
        otherCertiPercent: '',
        PolicyList: [],
        tableData: [],
        tableisData: [],
        pageIndex: 1,
        pageSize: 100,
        radio: 1,
        months: 3,
        type: '',
        typeA: '',
        borrowInPay: '',
        borrowOutIncome: '',
        renewalFee: '',
        friendFee: '',
        selfFee: '',
        totalCount: '',
        tableHeight: 0,
        tableHeightCode: 0,
        activeName: 'first',
        bidUsedCount: '',
        bidSuccessCount: '',
        OtherCount: '',
        borrowOutCountEdit: '',
        noUseCount: '',
        projectCount: '',
        borrowInCounts: '',
        borrowInPercented: '',
        borrowInReturnCounts: '',
        borrowInReturnPercented: '',
        bidUsedCounts: '',
        bidSuccessCounts: '',
        OtherCounts: '',
        borrowOutCounts: '',
        noUseCounts: '',
        projectCounts: '',
        // validityType: 0,
        chartLine: null,
        chartBar: null,
        // chartPie: null,
        chartScatter: null,
        EditCost: true,
        loading: true,
        dataEmpty: true,
        JSCount: '',
        QTCount: '',
        SLCount: '',
        TZCount: '',
        XCCount: '',
        ZCCount: '',
        ZCRCount: '',
        a: '',
        b: '',
        c: '',
        d: '',
        validityType: 2,
        days: '',
        code: '',
        noticeList: []
      }
    },
    computed: {
      infoflag: {
        get () { return this.$store.state.bizz.infoflag },
        set (val) { this.$store.commit('bizz/infoComplete', val) }
      },
      updateCount: {
        get () { return this.$store.state.bizz.count },
        set (val) { this.$store.commit('bizz/updateCount', val) }
      }
    },
    components: {
      HomeEnterprise, HomeHon
    },
    created () {
      this.init()
      this.getDataListType()
      this.getCountByAllValidityType()
      this.getPolicyList()
      this.getCountByStatusCollect()
      this.getCountByStatistics()
      this.getCertificateType()
      this.getDataCountValidityWarning()
      this.clickPersonnel()
      this.dataRefreh()
      this.dataRefrehs()
      if (this.isAuth('ent:msg:list')) {
        this.getNoticeListReq()
      }
      // console.log(555)
    // if(!sessionStorage.getItem('menuList')){
    //  this.navList()
    // }
    },
    watch: {
      // 1-3  环形图数据
      threeMonths: {
        handler (val) {
          window.setTimeout(() => {
            this.drawPieChart()
          }, 0)
        }
      },
      totalCount: {
        handler (val) {
          window.setTimeout(() => {
            this.drawPieChart()
          }, 0)
        }
      },
      notExpired: {
        handler (val) {
          window.setTimeout(() => {
            this.drawPieChart()
          }, 0)
        }
      },
      expired: {
        handler (val) {
          window.setTimeout(() => {
            this.drawPieChart()
          }, 0)
        }
      },
      friendFee: {
        handler (val) {
          window.setTimeout(() => {
            this.initCostEx()
          }, 0)
        }
      },
      borrowOutIncome: {
        handler (val) {
          window.setTimeout(() => {
            this.initCostEx()
          }, 0)
        }
      },
      JSCount: {
        handler (val) {
          window.setTimeout(() => {
            this.mycertificateType()
          }, 0)
        }
      },
      QTCount: {
        handler (val) {
          window.setTimeout(() => {
            this.mycertificateType()
          }, 0)
        }
      },
      SLCount: {
        handler (val) {
          window.setTimeout(() => {
            this.mycertificateType()
          }, 0)
        }
      },
      TZCount: {
        handler (val) {
          window.setTimeout(() => {
            this.mycertificateType()
          }, 0)
        }
      },
      XCCount: {
        handler (val) {
          window.setTimeout(() => {
            this.mycertificateType()
          }, 0)
        }
      },
      ZCCount: {
        handler (val) {
          window.setTimeout(() => {
            this.mycertificateType()
          }, 0)
        }
      },
      ZCRCount: {
        handler (val) {
          window.setTimeout(() => {
            this.mycertificateType()
          }, 0)
        }
      },
      // 证书状态监听数据
      // 其他
      OtherCounts: {
        handler (val) {
          window.setTimeout(() => {
            this.myStatef()
          }, 0)
        }
      },
      // 中标
      bidSuccessCounts: {
        handler (val) {
          window.setTimeout(() => {
            this.myStated()
          }, 0)
        }
      },
      // 投标
      bidUsedCounts: {
        handler (val) {
          window.setTimeout(() => {
            this.myStatec()
          }, 0)
        }
      },
      // 挂出
      borrowOutCounts: {
        handler (val) {
          window.setTimeout(() => {
            this.myStateb()
          }, 0)
        }
      },
      // 空闲
      noUseCounts: {
        handler (val) {
          window.setTimeout(() => {
            this.myStatea()
          }, 0)
        }
      },
      borrowInPercented: {
        handler (val) {
          window.setTimeout(() => {
            this.myStateh()
          }, 0)
        }
      },
      borrowInReturnPercented: {
        handler (val) {
          window.setTimeout(() => {
            this.myStatej()
          }, 0)
        }
      },
      // 项目
      projectCounts: {
        handler (val) {
          window.setTimeout(() => {
            this.myStatee()
          }, 0)
        }
      },
      certificateCount: {
        handler (val) {
          window.setTimeout(() => {
            this.a = this.$refs.myWarning.offsetHeight
            this.b = this.$refs.myKinds.offsetHeight
            this.c = this.$refs.costss.offsetHeight
            this.d = this.$refs.zhonglei.offsetHeight
            this.tableHeight = window.innerHeight - this.a - this.b - 100
            this.tableHeightCode = window.innerHeight - this.c - this.d - 100
          }, 0)
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.dataRefreh()
        this.dataRefrehs()
        this.drawPieChart()
        this.initCostEx()
        this.mycertificateType()
        this.clickChart()
        this.clickMycharts()
        this.myStatea()
        this.myStateb()
        this.myStatec()
        this.myStated()
        this.myStatee()
        this.myStatef()
        this.myStateh()
        this.myStatej()
        this.clickInitCostEx()
        this.clickDrawPieChart()
      })
    },
    methods: {
      isAuth (auth) {
        return isAuth(auth)
      },
      clickTurnToNotice () {
        this.newMsgDialogVisible = false
        this.$router.push({name: 'workbox-notice'})
      },
      getNoticeListReq () {
        getNoticeList(
          {
            'typeId': 1,
            'size': ''
          },
          (data) => {
            this.noticeList = data.data
            if (this.noticeList && this.noticeList.length > 0) {
              this.newMsgDialogVisible = true
            }
          }
        )
      },
      dataRefreh () {
      // 计时器正在进行中，退出函数
        setInterval(() => {
          if (this.kiveqie === 1) {
            this.clickTwos() // 加载数据函数
          }
        }, 5000)
      },
      dataRefrehs () {
      // 计时器正在进行中，退出函数
        setInterval(() => {
          if (this.kiveqie !== 1) {
            this.clickOnes() // 加载数据函数
          }
        }, 10000)
      },
      clickOnes () {
        this.kiveqie = 1
        this.kivetou = 2
        this.myStates = true
        this.myStatese = false
        this.$nextTick(() => {
          this.myStatea()
          this.myStateb()
          this.myStatej()
          this.myStateh()
        })
      },
      clickTwos () {
        this.kiveqie = 2
        this.kivetou = 1
        this.myStates = false
        this.myStatese = true
        this.$nextTick(() => {
          this.myStatec()
          this.myStated()
          this.myStatee()
          this.myStatef()
        })
      },
      // 点击跳转
      clickPathA () {
      // console.log(1);
        this.$router.push({name: 'certificate-certificateinfolist', params: { skipPathA: 1 }})
      },
      clickPathL () {
        this.$router.push({name: 'certificate-certificateinfolist', params: { skipPathL: 7 }})
      },
      clickPathM () {
        this.$router.push({name: 'certificate-certificateinfolist', params: { skipPathM: 8 }})
      },
      clickPathB () {
      // console.log(1);
        this.$router.push({name: 'certificate-certificateinfolist', params: { skipPathB: 2 }})
        // this.$router.push({name:'certificate-certificateinfolist'})
      },
      clickPathC () {
      // console.log(1);
        this.$router.push({name: 'certificate-certificateinfolist', params: { skipPathC: 3 }})
        // this.$router.push({name:'certificate-certificateinfolist'})
      },
      clickPathD () {
      // console.log(1);
        this.$router.push({name: 'certificate-certificateinfolist', params: { skipPathD: 4 }})
      },
      clickPathE () {
      // console.log(1);
        this.$router.push({name: 'certificate-certificateinfolist', params: { skipPathE: 5 }})
      },
      clickPathF () {
      // console.log(1);
        this.$router.push({name: 'certificate-certificateinfolist', params: { skipPathF: 6 }})
      },
      clickPersonnel () {
        this.personnelEdit = true
        this.enterpriseEdit = false
        this.messageEdit = false
        this.headera = 1
        this.headerb = 2
        this.headerc = 2
        this.bge = 1
        // console.log(this.a)
        // console.log(this.b)
        // console.log(this.c)
        // console.log(this.d)
      },
      clickEnterprise () {
        this.personnelEdit = false
        this.enterpriseEdit = true
        this.messageEdit = false
        this.headera = 2
        this.headerb = 1
        this.headerc = 2
        this.bge = 1
      // this.mycertificateHonorType()
      },
      clickMessage () {
        this.personnelEdit = false
        this.enterpriseEdit = false
        this.messageEdit = true
        this.headera = 2
        this.headerb = 2
        this.headerc = 1
        this.bge = 2
      },
      clickWaringA () {
        this.waringA = 1
        if (this.waringA === 1) {
          this.validityType = 2
          this.waringB = 2
          this.waringD = 4
          this.waringE = 5
          this.months = 3
          this.buttonKindC = 1
          this.buttonKindA = 1
          this.buttonKindB = 1
          this.getDataListType()
        }
      },
      clickWaringB () {
        this.waringB = 1
        if (this.waringB === 1) {
          this.waringA = 5
          this.waringD = 2
          this.waringE = 4
          this.validityType = 2
          this.days = 15
          this.type = 3
          this.buttonKindD = 1
          this.buttonKindE = 1
          this.buttonKindF = 1
          this.buttonKindG = 1
          this.getDataMessages()
        }
      },
      clickWaringD () {
        this.waringD = 1
        if (this.waringD === 1) {
          this.waringA = 4
          this.waringB = 5
          this.waringE = 2
          this.validityType = 2
          this.days = 15
          this.type = 21
          this.buttonKindD = 1
          this.buttonKindE = 1
          this.buttonKindF = 1
          this.buttonKindG = 1
          this.getDataMessages()
        }
      },
      clickWaringE () {
        this.waringE = 1
        if (this.waringE === 1) {
          this.waringA = 2
          this.waringB = 4
          this.waringD = 5
          this.validityType = 2
          this.days = 15
          this.type = 11
          this.buttonKindD = 1
          this.buttonKindE = 1
          this.buttonKindF = 1
          this.buttonKindG = 1
          this.getDataMessages()
        }
      },
      clickWaringG () {
        this.waringA = 1
        if (this.waringA === 1) {
          this.validityType = 2
          this.waringB = 2
          this.waringD = 4
          this.waringE = 5
          this.months = 3
          this.buttonKindC = 1
          this.buttonKindA = 1
          this.buttonKindB = 1
        // this.getDataListType()
        }
      },
      clickWaringH () {
        this.waringA = 1
        if (this.waringA === 1) {
          this.validityType = 2
          this.waringB = 2
          this.waringD = 4
          this.waringE = 5
          this.months = 3
          this.buttonKindC = 1
          this.buttonKindA = 1
          this.buttonKindB = 1
        // this.getDataListType()
        }
      },
      clickTs () {
        this.EditCost = true
        console.log(this.EditCost)
        this.getCertificateType()
        this.mycertificateType()
      },
      // 高度
      offsetHeight () {
        this.a = this.$refs.myWarning.offsetHeight
        this.b = this.$refs.myKinds.offsetHeight
      },
      // xiazuan  gaodu
      offsetHeightCode () {
        this.c = this.$refs.costss.offsetHeight
        this.d = this.$refs.zhonglei.offsetHeight
      },
      // 证书种l
      mycertificateType () {
        this.chart = echarts.init(this.$refs.mycertificateType)
        this.chart.setOption({
          title: {
        // text: '(万元)',
        // color:'#fff'
        // subtext: '(万元)',
          },
          grid: {
            top: '8%',
            bottom: '7%',
            left: '10%'
          },
          xAxis: {
            type: 'category',
            data: ['注册', '职称', '三类', '岗位', '技工', '特种工', '其他'],
            axisLine: {  // 这是x轴文字颜色
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {  // 这是x轴文字颜色
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 1,
                type: 'solid'
              }
            }
          },
      //  color:['#2CD4FF'],
          color: new echarts.graphic.LinearGradient(0, 0.4, 0.7, 1, [{
            offset: 0,
            color: '#2CD4FF'
          },
          {
            offset: 1,
            color: 'rgba( 44, 212, 255, 0)'
          }
          ]),
          series: [{
            data: [this.ZCCount, this.ZCRCount, this.SLCount, this.XCCount, this.JSCount, this.TZCount, this.QTCount],
            barWidth: 20, // 柱图宽度
            barGap: 37,
            itemStyle: {
              normal: {
                label: {
                  // 开启显示
                  show: true,
                  // 在上方显示
                  position: 'top',
                  // 数值样式
                  textStyle: {
                    color: '#fff',
                    fontSize: 14
                  }
                }
              }
            },
            type: 'bar'
          }]
        })
      },
      // 下钻
      clickChart () {
        this.chart.on('click', (params) => {
          this.EditCost = false
          if (params.name === '注册') {
            this.code = 'conf_certificate_type_zc'
            this.getDataCodeList()
          }
          if (params.name === '职称') {
            this.code = 'conf_certificate_type_zcr'
            this.getDataCodeList()
          }
          if (params.name === '三类') {
            this.code = 'conf_certificate_type_sl'
            this.getDataCodeList()
          }
          if (params.name === '岗位') {
            this.code = 'conf_certificate_type_xc'
            this.getDataCodeList()
          }
          if (params.name === '技工') {
            this.code = 'conf_certificate_type_js'
            this.getDataCodeList()
          }
          if (params.name === '特种工') {
            this.code = 'conf_certificate_type_tz'
            this.getDataCodeList()
          }
          if (params.name === '其他') {
            this.code = 'conf_certificate_type_qt'
            this.getDataCodeList()
          }
        })
      },
      clickMycharts () {
        this.mycharts.on('click', (params) => {
          if (params.name === '挂出收入') {
            this.$router.push({name: 'certificate-statistics/particulars-income', params: { cost: 1 }})
          }
          if (params.name === '挂入费用') {
            this.$router.push({name: 'certificate-statistics/particulars-income', params: { cost: 2 }})
          }
          if (params.name === '非在职费用') {
            this.$router.push({name: 'certificate-statistics/particulars-income', params: { cost: 3 }})
          }
          if (params.name === '在职费用') {
            this.$router.push({name: 'certificate-statistics/particulars-income', params: { cost: 4 }})
          }
          if (params.name === '延期费用') {
            this.$router.push({name: 'certificate-statistics/particulars-income', params: { cost: 5 }})
          }
        })
      },
      getDataCodeList () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getCertificateIdTypeCollect'),
          method: 'get',
          params: this.$http.adornParams({
            'type': this.code
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.tableisData = data.data
            console.log(this.tableisData)
          } else {
            console.log(123)
          }
        })
      },
      // 证书状态玫瑰图
      myStatea () {
        this.chart = echarts.init(this.$refs.myStatea)
        this.chart.setOption({
          title: {
            show: true,
            text: this.noUseCounts + '%',
            // x:'center',
            // y:'center',
            left: 'center',
            top: '43%',
            textStyle: {
              fontSize: '16',
              color: '#FFFFFF',
              fontWeight: '500'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%',
            show: false
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            show: false
          },
          series: {
            name: '',
            type: 'pie',
            radius: ['65%', '85%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: this.noUseCounts,
                name: '占比',
                itemStyle: {
                  color: '#41D9E7'
                }
              },
              {
                value: 100 - this.noUseCounts,
                name: '',
                itemStyle: {
                  color: '#154464'
                }
              }]}
        })
      },
      myStateb () {
        this.chart = echarts.init(this.$refs.myStateb)
        this.chart.setOption({
          title: {
            show: true,
            text: this.borrowOutCounts + '%',
            // x:'center',
            // y:'center',
            left: 'center',
            top: '43%',
            textStyle: {
              fontSize: '16',
              color: '#FFFFFF',
              fontWeight: '500'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%',
            show: false
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            show: false
          },
          series: {
            name: '',
            type: 'pie',
            radius: ['65%', '85%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: this.borrowOutCounts,
                name: '占比',
                itemStyle: {
                  color: '#41D9E7'
                }
              },
              {
                value: 100 - this.borrowOutCounts,
                name: '',
                itemStyle: {
                  color: '#154464'
                }
              }
            ]
          }
        })
      },
      // this.bidUsedCounts
      myStatec () {
        this.chart = echarts.init(this.$refs.myStatec)
        this.chart.setOption({
          title: {
            show: true,
            text: this.bidUsedCounts + '%',
            // x:'center',
            // y:'center',
            left: 'center',
            top: '43%',
            textStyle: {
              fontSize: '16',
              color: '#FFFFFF',
              fontWeight: '500'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%',
            show: false
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            show: false
          },
          series: {
            name: '',
            type: 'pie',
            radius: ['65%', '85%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: this.bidUsedCounts,
                name: '占比',
                itemStyle: {
                  color: '#41D9E7'
                }
              },
              {
                value: 100 - this.bidUsedCounts,
                name: '',
                itemStyle: {
                  color: '#154464'
                }
              }]}
        })
      },
      myStated () {
        this.chart = echarts.init(this.$refs.myStated)
        this.chart.setOption({
          title: {
            show: true,
            text: this.bidSuccessCounts + '%',
            // x:'center',
            // y:'center',
            left: 'center',
            top: '43%',
            textStyle: {
              fontSize: '16',
              color: '#FFFFFF',
              fontWeight: '500'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%',
            show: false
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            show: false
          },
          series: {
            name: '',
            type: 'pie',
            radius: ['65%', '85%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: this.bidSuccessCounts,
                name: '占比',
                itemStyle: {
                  color: '#41D9E7'
                }
              },
              {
                value: 100 - this.bidSuccessCounts,
                name: '',
                itemStyle: {
                  color: '#154464'
                }
              }]}
        })
      },
      myStatee () {
        this.chart = echarts.init(this.$refs.myStatee)
        this.chart.setOption({
          title: {
            show: true,
            text: this.projectCounts + '%',
            // x:'center',
            // y:'center',
            left: 'center',
            top: '43%',
            textStyle: {
              fontSize: '16',
              color: '#FFFFFF',
              fontWeight: '500'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%',
            show: false
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            show: false
          },
          series: {
            name: '',
            type: 'pie',
            radius: ['65%', '85%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: this.projectCounts,
                name: '占比',
                itemStyle: {
                  color: '#41D9E7'
                }
              },
              {
                value: 100 - this.projectCounts,
                name: '',
                itemStyle: {
                  color: '#154464'
                }
              }
            ]
          }
        })
      },
      myStatef () {
        this.chart = echarts.init(this.$refs.myStatef)
        this.chart.setOption({
          title: {
            show: true,
            text: this.OtherCounts + '%',
            // x:'center',
            // y:'center',
            left: 'center',
            top: '43%',
            textStyle: {
              fontSize: '16',
              color: '#FFFFFF',
              fontWeight: '500'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%',
            show: false
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            show: false
          },
          series:
          {
            name: '',
            type: 'pie',
            radius: ['65%', '85%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: this.OtherCounts,
                name: '占比',
                itemStyle: {
                  color: '#41D9E7'
                }
              },
              {
                value: 100 - this.OtherCounts,
                name: '',
                itemStyle: {
                  color: '#154464'
                }
              }]
          }
        })
      },
      myStateh () {
        this.chart = echarts.init(this.$refs.myStatetop)
        this.chart.setOption({
          title: {
            show: true,
            text: this.borrowInPercented + '%',
            // x:'center',
            // y:'center',
            left: 'center',
            top: '43%',
            textStyle: {
              fontSize: '16',
              color: '#FFFFFF',
              fontWeight: '500'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%',
            show: false
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            show: false
          },
          series:
          {
            name: '',
            type: 'pie',
            radius: ['65%', '85%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: this.borrowInPercented,
                name: '占比',
                itemStyle: {
                  color: '#41D9E7'
                }
              },
              {
                value: 100 - this.borrowInPercented,
                name: '',
                itemStyle: {
                  color: '#154464'
                }
              }
            ]
          }
        })
      },
      myStatej () {
        this.chart = echarts.init(this.$refs.myStatebop)
        this.chart.setOption({
          title: {
            show: true,
            text: this.borrowInReturnPercented + '%',
            // x:'center',
            // y:'center',
            left: 'center',
            top: '43%',
            textStyle: {
              fontSize: '16',
              color: '#FFFFFF',
              fontWeight: '500'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%',
            show: false
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            show: false
          },
          series:
          {
            name: '',
            type: 'pie',
            radius: ['65%', '85%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: this.borrowInReturnPercented,
                name: '占比',
                itemStyle: {
                  color: '#41D9E7'
                }
              },
              {
                value: 100 - this.borrowInReturnPercented,
                name: '',
                itemStyle: {
                  color: '#154464'
                }
              }
            ]
          }
        })
      },
      // 费用统计柱状图
      initCostEx () {
        this.mycharts = echarts.init(this.$refs.myCost)
        this.mycharts.setOption({
          title: {
        // text: '(万元)',
        // color:'#fff'
            subtext: '(万元)',
            textStyle: {
              color: '#ffffff'
            }
          },
          grid: {
            top: '12%',
            bottom: '19%',
            left: '10%'
          },
          xAxis: {
            type: 'category',
            data: ['挂出收入', '挂入费用', '非在职费用', '在职费用', '延期费用'],
            axisLine: {  // 这是x轴文字颜色
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                let str = ''
                let num = 2 // 每行显示字数
                let valLength = value.length // 该项x轴字数
                let rowNum = Math.ceil(valLength / num) // 行数

                if (rowNum > 1) {
                  for (let i = 0; i < rowNum; i++) {
                    let temp = ''
                    let start = i * num
                    let end = start + num

                    temp = value.substring(start, end) + '\n'
                    str += temp
                  }
                  return str
                } else {
                  return value
                }
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {  // 这是x轴文字颜色
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 1,
                type: 'solid'
              }
            }
          },
          color: new echarts.graphic.LinearGradient(0, 0.4, 0.7, 1, [{
            offset: 0,
            color: '#28B1FF'
          }, {
            offset: 1,
            color: 'rgba( 40, 177, 255, 0)'
          }]),
          series: [{
            data: [this.borrowOutIncome, this.borrowInPay, this.friendFee, this.selfFee, this.renewalFee],
            barWidth: 25, // 柱图宽度
            itemStyle: {
              normal: {
                label: {
                  // 开启显示
                  show: true,
                  // 在上方显示
                  position: 'top',
                  // 数值样式
                  textStyle: {
                    color: '#fff',
                    fontSize: 14
                  }
                }
              }
            },
            type: 'bar'
          }]
        })
      },
      clickInitCostEx () {
        this.mycharts.on('click', (s) => {
          if (s.name === '挂出收入') {
            this.$router.push({name: 'certificate-statistics/particulars-income'})
          }
          if (s.name === '挂入费用') {
            this.$router.push({name: 'certificate-statistics/particulars-income'})
          }
          if (s.name === '非在职费用') {
            this.$router.push({name: 'certificate-statistics/particulars-income'})
          }
          if (s.name === '在职费用') {
            this.$router.push({name: 'certificate-statistics/particulars-income'})
          }
        })
      },
      // 环形tututu
      drawPieChart () {
/*        let mytextStyle = {
          color: '#333',
          fontSize: 18
        } */
/*        let mylabel = {
          show: true,
          position: 'right',
          offset: [30, 40],
          formatter: '{b} : {c} ({d}%)',
          textStyle: mytextStyle
        } */
        this.chartPie = echarts.init(document.getElementById('chartPie'), 'macarons')
        this.chartPie.setOption({
          title: {
            text: '证书总数',
            subtext: this.totalCount,
            x: 'center',
            y: '40%',
            textStyle: {// 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              // fontFamily: 'Arial, Verdana, sans...',
              fontSize: 15,
              fontStyle: 'normal',
              fontWeight: 'normal',
              color: '#C0C4CC'
            },
            subtextStyle: {// 副标题文本样式{"color": "#aaa"}
              // fontFamily: 'Arial, Verdana, sans...',
              fontSize: 40,
              fontStyle: 'normal',
              fontWeight: 'normal',
              'color': '#ffffff'
              // color
            }
          },
          label: {
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            data: [
              {value: this.notExpired, name: '在职'},
              {value: this.expired, name: '挂靠'},
              {value: this.threeMonths, name: '非在职'}
            ],
            icon: 'circle',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 40, // 设置间距
            color: ['#fff'],
            left: 'center',
            top: 'bottom',
            color: '#fff',
            orient: 'horizontal',
            textStyle: {
              color: '#ffffff'
            }
          },
          color: ['#16E7FD', '#3EBDFF', '#3E90FF'],
          series: [
            {
              name: '证书统计',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              data: [
                {value: this.expired, name: '挂靠'},
                {value: this.notExpired, name: '在职'},
                {value: this.threeMonths, name: '非在职'}
              ],
              itemStyle: {
                normal: {
                  label: {
                    textStyle: {

                    }
                  }
                }
              },
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {
                textStyle: {// 数值样式
                    //  color: '#fff',
                  fontSize: 14,
                  color: '#ffffff'
                },
                normal: {
                  show: true,
                  formatter: '{b} : {c}',
                  textStyle: {
                    color: '#ffffff'  // 改变标示文字的颜色
                  }
                }
              }
            }
          ]
        })
      },
      clickDrawPieChart () {
        this.chartPie.on('click', (s) => {
          if (s.name === '在职') {
            this.$router.push({name: 'certificate-certificateinfolist', params: { skipParamA: 1 }})
          }
          if (s.name === '挂靠') {
            this.$router.push({name: 'certificate-certificateinfolist', params: { skipParamB: 2 }})
          }
          if (s.name === '非在职') {
            this.$router.push({name: 'certificate-certificateinfolist', params: { skipParamC: 3 }})
          }
        })
      },
      getDataCountValidityWarning () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/countValidityWarning'),
          method: 'get'
        }).then(({data}) => {
          this.borrowInCount = data.borrowInCount
          this.borrowOutCounted = data.borrowOutCount
          this.certificateCount = data.certificateCount
          this.transactionCount = data.transactionCount
            // this.transactionReturnCount = data.transactionReturnCount
        })
      },
      init () {
        if (this.updateCount === 0) {
          this.$http({
            url: this.$http.adornUrl('/tenant/tenantInfo/check'),
            method: 'get',
            params: this.$http.adornParams({})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.infoflag = data.isOk
              this.updateCount = 1
              if (!data.isOk) {
                this.$router.push({name: 'complete'})
              }
            } else {
              this.dataList = []
            }
            this.dataListLoading = false
          })
        }
      },
      clickThree () {
        this.validityType = 0
        this.months = 3
        this.buttonKindA = 1
        this.buttonKindB = 1
        this.buttonKindC = 2
        this.buttonKindQ = 1
        this.getDataListType()
      // }
      },
      clickOne () {
        this.validityType = 0
        this.months = 1
        this.buttonKindA = 1
        this.buttonKindB = 2
        this.buttonKindC = 1
        this.buttonKindQ = 1
        this.getDataListType()
      // }
      },
      clickExpire () {
        this.validityType = -1
        this.buttonKindA = 2
        this.buttonKindB = 1
        this.buttonKindC = 1
        this.buttonKindQ = 1
        this.getDataListType()
      // }
      },
      clickQuan () {
        this.months = 3
        this.validityType = 2
        this.buttonKindA = 1
        this.buttonKindB = 1
        this.buttonKindC = 1
        this.buttonKindQ = 2
        this.getDataListType()
      },
      clickBan () {
        this.validityType = 0
        this.buttonKindD = 2
        this.buttonKindE = 1
        this.buttonKindF = 1
        this.buttonKindG = 1
        this.buttonKindQ = 1
        this.days = 15
        this.getDataMessages()
      },
      clickQuanEr () {
        this.validityType = 2
        this.buttonKindD = 1
        this.buttonKindE = 1
        this.buttonKindF = 1
        this.buttonKindG = 1
        this.buttonKindQ = 2
        this.days = 15
        this.getDataMessages()
      },
      // 7
      clickQi () {
        this.validityType = 0
        this.buttonKindE = 2
        this.buttonKindD = 1
        this.buttonKindF = 1
        this.buttonKindG = 1
        this.buttonKindQ = 1
        this.days = 7
        this.getDataMessages()
      },
      // 3
      clickSan () {
        this.validityType = 0
        this.buttonKindF = 2
        this.buttonKindD = 1
        this.buttonKindE = 1
        this.buttonKindG = 1
        this.buttonKindQ = 1
        this.days = 3
        this.getDataMessages()
      },
      // yiguoqi
      clickYi () {
        this.validityType = -1
        this.buttonKindG = 2
        this.buttonKindD = 1
        this.buttonKindE = 1
        this.buttonKindF = 1
        this.buttonKindQ = 1
        this.days = 3
        this.getDataMessages()
      },
      // 获取挂入，挂出，归还
      getDataMessages () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certiTransactionInfo/list'),
          method: 'get',
          params: this.$http.adornParams({
            'validityType': this.validityType,
            'type': this.type,
            'page': 1,
            'limit': this.pageSize,
            'days': this.days
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.tableData = data.page.list
          } else {
          }
        })
      },
      // 获取证书种类数据
      getCertificateType () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getCertificatePIdTypeCollect'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.JSCount = data.conf_certificate_type_js
            this.QTCount = data.conf_certificate_type_qt
            this.SLCount = data.conf_certificate_type_sl
            this.TZCount = data.conf_certificate_type_tz
            this.XCCount = data.conf_certificate_type_xc
            this.ZCCount = data.conf_certificate_type_zc
            this.ZCRCount = data.conf_certificate_type_zcr
          }
        })
      },
      // 状态到期预警 1-3
      getDataListType () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'validityType': this.validityType,
            'type': this.typeA,
            'months': this.months
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.tableData = data.page.list
            // this.totalPage = data.page.totalCount
          }
        })
      },
      gotoEmployee () {
        // this.showNotice()
        if (this.infoflag) {
          this.$router.push({name: 'company-employee'})
        }
      },
      getCountByAllValidityType () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getCertificateTypeCollect'),
          method: 'get'
        }).then(({data}) => {
          // console.log(data)
          this.expired = data.partTimeCount
          this.notExpired = data.selfCount
          this.threeMonths = data.friendCount
          this.totalCount = data.totalCount
        })
      },
      // 2
      getCountByStatusCollect () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getCertificateStatusCollect'),
          method: 'get'
        }).then(({data}) => {
          // console.log(data)
          this.OtherCount = data.OtherCount // 其他
          this.bidSuccessCount = data.bidSuccessCount  // 中标
          this.bidUsedCount = data.bidUsedCount // 投标
          this.borrowOutCount = data.borrowOutCount // 挂出
          this.noUseCount = data.noUseCount // 空闲
          this.projectCount = data.projectCount // 项目
          this.OtherCounts = data.otherPercent
          this.bidSuccessCounts = data.bidSuccessPercent
          this.bidUsedCounts = data.bidUsedPercent
          this.noUseCounts = data.noUsePercent
          this.projectCounts = data.projectPercent
          this.borrowOutCounts = data.borrowOutPercent
          this.borrowInCounts = data.borrowInCount
          this.borrowInPercented = data.borrowInPercent
          this.borrowInReturnCounts = data.borrowInReturnCount
          this.borrowInReturnPercented = data.borrowInReturnPercent
        })
      },
      // 企业证书第一个图
      getCountBycertiTypeCount () {
        this.$http({
          url: this.$http.adornUrl('/cert/entOther/certiTypeCount'),
          method: 'get'
        }).then(({data}) => {
          if (data.code === 0) {
            this.honorCertiCount = data.honorCertiCount
            this.honorCertiPercent = data.honorCertiPercent
            this.isoCertiCount = data.isoCertiCount
            this.isoCertiPercent = data.isoCertiPercent
            this.otherCertiCount = data.otherCertiCount
            this.otherCertiPercent = data.otherCertiPercent
            this.qualiCertiCount = data.qualiCertiCount
            this.qualiCertiPercent = data.qualiCertiPercent
          }
        })
      },

      // heng
      getCountByStatistics () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getFeeStatistics'),
          method: 'get'
        }).then(({data}) => {
          // console.log(data)
          this.borrowInPay = data.borrowInPay
          this.borrowOutIncome = data.borrowOutIncome
          this.friendFee = data.friendFee
          this.selfFee = data.selfFee
          this.renewalFee = data.renewalFee
        })
      },
      gotoCertificateinfoRenewal () {
        // this.showNotice()
        if (this.infoflag) {
          this.$router.push({name: 'certificate-certificateinforenewal'})
        }
      },

      gotoCertificateinfoAdd () {
        this.$router.push({name: 'certificate-certificateinfoadd'})
      },
      gotoDeptInfo () {
        // this.showNotice()
        if (this.infoflag) {
          this.$router.push({name: 'company-deptInfo'})
        }
      },
      // 资讯列表
      getPolicyList () {
        this.$http({
          url: this.$http.adornUrl(`/sys/policy/list`),
          method: 'get',
          params: this.$http.adornParams({
            'visible': this.radio,
            'page': this.pageIndex,
            'limit': this.pageSize
          })
        }).then(({data}) => {
          if (data.code === 0) {
            this.PolicyList = data.page.list
            console.log(this.PolicyList)
              // this.totalCount = data.page.totalCount
          } else {
            this.$message.error(data.msg)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.demo-header{
  width: 100%;
  height: 5vh;
  background: url(~@/assets/img/toubu.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .div-buttona{
    width: 150px;
    height: 5vh;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background:  url(~@/assets/img/toubuanniu.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button--text{
    color:#ffffff;
    font-size: 16px;
    }
  }
  .div-buttonb{
    width: 150px;
    height: 5vh;
    font-size: 16px;
    color: #ffffff;
    opacity: 0.65;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button--text{
    color:#ffffff;
    font-size: 16px;
    }
  }
}
.warning{
  margin-top: 4px;
  width: 38%;
  float: left;
  margin-left: 2%;
  background: url(~@/assets/img/yuanpan.png) no-repeat;
  background-size:100% 70%;
  background-position:bottom left;
  // margin-left: 6px;
  height: 48vh;
  position: relative;
}
@keyframes move-a {
  5%{
  // .waring-a{
  width: 24%;
  height: 34.5%;
  text-align: center;
  position:absolute;
  left: 39%;
  top: 33%;
  font-size: 18px;
  font-weight: 400;
  color: #3AFBFF;
   .waring-is{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     background-image: url(../../assets/img/xiaoyuanyuan.png);
     background-size: 100% 100%;
     margin-bottom: 5px;
   }
  //  }
  }
  10%{
    // .waring-a{
    width: 24%;
    height: 34.5%;
    text-align: center;
    position:absolute;
    left: 39%;
    top: 33%;
    font-size: 18px;
    font-weight: 400;
    color: #3AFBFF;
    .waring-is{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: url(../../assets/img/xiaoyuanyuan.png);
      background-size: 100% 100%;
      margin-bottom: 5px;
    }
    // }
  }
  20%{
    // .waring-a{
    width: 24%;
    height: 34.5%;
    text-align: center;
    position:absolute;
    left: 39%;
    top: 33%;
    font-size: 18px;
    font-weight: 400;
    color: #3AFBFF;
    .waring-is{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: url(../../assets/img/xiaoyuanyuan.png);
      background-size: 100% 100%;
      margin-bottom: 5px;
    }
    // }
    }
  30%{
    // .waring-a{
    width: 24%;
    height: 34.5%;
    text-align: center;
    position:absolute;
    left: 39%;
    top: 33%;
    font-size: 18px;
    font-weight: 400;
    color: #3AFBFF;
    .waring-is{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: url(../../assets/img/xiaoyuanyuan.png);
      background-size: 100% 100%;
      margin-bottom: 5px;
    }
    // }
  }
  40%{
    // .waring-a{
    width: 24%;
    height: 34.5%;
    text-align: center;
    position:absolute;
    left: 39%;
    top: 33%;
    font-size: 18px;
    font-weight: 400;
    color: #3AFBFF;
    .waring-is{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: url(../../assets/img/xiaoyuanyuan.png);
      background-size: 100% 100%;
      margin-bottom: 5px;
    }
    // }
  }
  // 50%{
  //   width: 10%;
  //   height: 16%;
  //   left: 50%;
  //   top: 0%;
  //   font-size: 9px;
  //   font-weight: 700;
  // }
  // 60%{
  //   width: 13%;
  //   height: 22%;
  //   left: 28%;
  //   top: 5%;
  //   font-size: 12px;
  //   font-weight: 700;
  // }
  // 70%{
  //   width: 16.5%;
  //   height: 27.5%;
  //   left: 20%;
  //   top: 15%;
  //   font-size: 12px;
  //   font-weight: 700;
  // }
  // 80%{
  //   width: 20%;
  //   height: 33%;
  //   left: 12%;
  //   top: 30%;
  //   font-size: 15px;
  // }
  // 90%{
  //   width: 22.5%;
  //   height: 38%;
  //   left: 33%;
  //   top: 30%;
  //   font-size: 18px;
  //   font-weight: 700;
  // }
  // 100%{
  //   width: 25%;
  //   height: 43%;
  //   left: 38%;
  //   top: 40%;
  // }
}
@keyframes move-b {
  10%{
    width: 16.5%;
    height: 27.5%;
    left: 80%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  20%{
    width: 13%;
    height: 22%;
    left: 62%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
  30%{
    width: 10%;
    height: 16%;
    left: 50%;
    top: 0%;
    font-size: 9px;
    font-weight: 700;
  }
  40%{
    width: 13%;
    height: 22%;
    left: 28%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
  50%{
    width: 16.5%;
    height: 27.5%;
    left: 20%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  60%{
    width: 20%;
    height: 33%;
    left: 12%;
    top: 30%;
    font-size: 15px;
  }
  70%{
    width: 22.5%;
    height: 38%;
    left: 37%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  80%{
    width: 25%;
    height: 43%;
    left: 38%;
    top: 40%;
  }
  90%{
    width: 22.5%;
    height: 38%;
    left: 63%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  100%{
    width: 20%;
    height: 33%;
    left: 70%;
    top: 30%;
    font-size: 15px;
    }
}
@keyframes move-d {

  10%{
    width: 16.5%;
    height: 27.5%;
    left: 20%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  20%{
    width: 20%;
    height: 33%;
    left: 12%;
    top: 30%;
    font-size: 15px;
  }
  30%{
    width: 22.5%;
    height: 38%;
    left: 37%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  40%{
    width: 25%;
    height: 43%;
    left: 38%;
    top: 40%;
  }
  50%{
    width: 22.5%;
    height: 38%;
    left: 63%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  60%{
    width: 20%;
    height: 33%;
    left: 70%;
    top: 30%;
    font-size: 15px;
    }
  70%{
    width: 16.5%;
    height: 27.5%;
    left: 80%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  80%{
    width: 13%;
    height: 22%;
    left: 62%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
  90%{
    width: 10%;
    height: 16%;
    left: 50%;
    top: 0%;
    font-size: 9px;
    font-weight: 700;
  }
  100%{
    width: 13%;
    height: 22%;
    left: 28%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
}
@keyframes move-e {
  10%{
    width: 22.5%;
    height: 38%;
    left: 37%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  20%{
    width: 25%;
    height: 43%;
    left: 38%;
    top: 40%;
  }
  30%{
    width: 22.5%;
    height: 38%;
    left: 63%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  40%{
    width: 20%;
    height: 33%;
    left: 70%;
    top: 30%;
    font-size: 15px;
    }
  50%{
    width: 16.5%;
    height: 27.5%;
    left: 80%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  60%{
    width: 13%;
    height: 22%;
    left: 62%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
  70%{
    width: 10%;
    height: 16%;
    left: 50%;
    top: 0%;
    font-size: 9px;
    font-weight: 700;
  }
  80%{
    width: 13%;
    height: 22%;
    left: 28%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
  90%{
    width: 16.5%;
    height: 27.5%;
    left: 20%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  100%{
    width: 20%;
    height: 33%;
    left: 12%;
    top: 30%;
    font-size: 15px;
  }
}
.waring-a{
  width: 24%;
  height: 34.5%;
  text-align: center;
  position:absolute;
  left: 39%;
  top: 33%;
  font-size: 18px;
  font-weight: 400;
  color: #FFE552;
  // animation: move-a 20s linear infinite;
  .waring-is{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: url(~@/assets/img/dayuanyuan.png);
  background-size: 100% 100%;
  // margin-bottom: 5px;
  }
}
.kind-wtf{
  height: 4.1vh;
}
// .xiazuan-s{
//   // margin-top: 4.1vh;
// }
.xiazuan-div{
  height: 47vh;
  width: 100%;
}
.waring-b{
  width: 15%;
  height: 22%;
  float: left;
  position:absolute;
  left: 90%;
  top: 20%;
  font-size: 15px;
  // animation: move-b 20s linear infinite;
  font-weight: 400;
  color: #3AFBFF;
  text-align: center;
  .waring-is{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(~@/assets/img/xiaoyuanyuan.png);
  background-size: 100% 100%;
  margin-bottom: 4px;
  }
}
.waring-d{
  width: 9%;
  height: 13%;
  position:absolute;
  left:46.5%;
  top: 10%;
  font-size: 8px;
  font-weight: 500;
  color: #3AFBFF;
  // animation: move-d 20s linear infinite;
  text-align: center;
  span{
    font-size: 8px !important;
  }
  .waring-is{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(~@/assets/img/xiaoyuanyuan.png);
  background-size: 100% 100%;
  margin-bottom: 3px;
  h2{
    font-size: 8px !important;
  }
  }

}
.waring-e{
  width: 15%;
  height: 22%;
  position:absolute;
  left: -5%;
  top: 20%;
  // animation: move-e 20s linear infinite;
  text-align: center;
	font-size: 15px;
  font-weight: 400;
  color: #3AFBFF;
  .waring-is{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(~@/assets/img/xiaoyuanyuan.png);
  background-size: 100% 100%;
  margin-bottom: 4px;
  }
}
.pie-wrap{
  width:100%;
  height:41.5vh;
    }
.cost-es{
  width: 100%;
  height: 41vh;
}
.certificateState-es{
  width: 100%;
  height: 41vh;
.state-a{
  width: 50%;
  height: 50%;
  float: left;
  text-align: center;
  .state-as{
    width: 100%;
    height: 80%;
  }
  .state-bs{
    width: 100%;
    height: 80%;
  }
  .state-cs{
    width: 100%;
    height: 80%;
  }
  .state-ds{
    width: 100%;
    height: 80%;
  }
  .state-es{
    width: 100%;
    height: 80%;
  }
  .state-fs{
    width: 100%;
    height: 80%;
  }
}
}
.certificateState-ess{
  width: 100%;
  height: 41vh;
.state-a{
  width: 50%;
  height: 50%;
  float: left;
  text-align: center;
  .state-as{
    width: 100%;
    height: 80%;
  }
  .state-bs{
    width: 100%;
    height: 80%;
  }
  .state-cs{
    width: 100%;
    height: 80%;
  }
  .state-ds{
    width: 100%;
    height: 80%;
  }
  .state-es{
    width: 100%;
    height: 80%;
  }
  .state-fs{
    width: 100%;
    height: 80%;
  }
}
}
.kongxian{
  width: 100%;
  height: 20%;
  color: #ffffff;
  font-size: 14px;
  // margin-bottom: 5px;
  text-align: center;
}
.certificateType-es{
  width: 100%;
  height: 43vh;
  // transform: (translateX(-9%));
}
 .demo-top{
   width: 100%;
   height: 47.5vh;
  //  margin-top: 6px;
 }
.certificateType{
  float: left;
  margin-left: 15px;
  background-size: 100% 100%;
  width: 25%;
  height: 48vh;
}
.certificateHonorType-es{
  width: 100%;
  height: 43vh;
  // transform: (translateX(-9%));
}
.select-kind{
  // /deep/ .el-button:focus, .el-button:hover{
  //   color:#3EBDFF;
  // }
  // position:absolute;
  // bottom: 0;
  // right: 0;
  // display: flex;
  // justify-content: center;
  width: 70%;
  height: 4vh;
  float: right;
  text-align: center;
  background-color:transparent;
  .buttonKind-a{
    height: 4vh;
    float: right;
    margin-left: 8px;
    font-weight: 700;
    margin-right: 20px;
    color: #40CDF1;
    text-align: center;
  }
  .buttonKind-a:hover{
  color: #ffffff;
  }
  .buttonKind-active{
    float: right;
    height: 4vh;

    margin-left: 8px;
    font-weight: 700;
    margin-right: 20px;
    // color: #909399;
    color: #ffffff;
  }
  .buttonKind-b{
    height: 4vh;
    float: right;
    color: #40CDF1;
    font-weight: 700;
  }
  .buttonKind-b:hover{
  color: #ffffff;
  }
  .buttonKind-bctive{
    float: right;
    height: 4vh;

    // color: #909399;
    font-weight: 700;
  color:#ffffff;
  }
  .buttonKind-c{
    height: 4vh;
    float: right;
    color: #40CDF1;
    font-weight: 700;
  }
  .buttonKind-c:hover{
  color: #ffffff;
  }
  .buttonKind-cctive{
  float: right;
    height: 4vh;

  // color: #909399;
  font-weight: 700;
  color: #ffffff;
  }
  .buttonKind-q{
    height: 4vh;
    float: right;
    color: #40CDF1;
    font-weight: 700;
  }
  .buttonKind-q:hover{
  color: #ffffff;
  }
  .buttonKind-qctive{
    height: 4vh;

  float: right;
  // color: #909399;
  font-weight: 700;
  color: #ffffff;
  }
}
.kind{
  height: 4vh;
  width: 100%;
  display: flex;
  // justify-content:center;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0) 100%);
  align-items:center;
  // padding-left: 30px;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  .biaoshi{
    width: 5px;
    height: 4vh;
    margin-right: 10px;
    background-color: #41D9E7;
  }
}
.kind-zhong{
  float: left;
  height: 4vh;
  width: 50%;
  display: flex;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0) 100%);
  align-items:center;
  // padding-left: 30px;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  .biaoshi{
    width: 5px;
    height: 4vh;
    margin-right: 10px;
    background-color: #41D9E7;
  }
}
.return-es{
width: 30%;
height: 4.5vh;
float: right;
font-size: 14px;
}
.kind-e{
  position:relative;
  height: 4vh;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0) 100%);
  width: 100%;
}
// .select-kind{
//   width: 85px;
//   // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
//   /deep/ input::-webkit-input-placeholder {
//     color: #fff;
//   }
//   /deep/  input::-moz-input-placeholder {
//     color: #fff;
//   }
//   /deep/  input::-ms-input-placeholder {
//     color: #fff;
//   }
//   //修改的是el-input的样式
//   //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
//   //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
//   /deep/ .el-select,
//   /deep/ .el-input,
//   /deep/ .el-input__inner{
//     background-color:transparent ;
//     color:#3EBDFF;
//     border:0px;
//     border-radius:0px;
//     text-align: center;
//   }
//   /deep/ .el-scrollbar{
//     background-color: transparent;
//   }
//   //el-input聚焦的时候 外层的border会有一个样式
//   /deep/ .el-select .el-input.is-focus .el-input__inner{
//     border:0px;
//   }

//   //修改的是el-input上下的小图标的颜色
//   /deep/ .el-select .el-input .el-select__caret{
//     color:#fff;
//   }

//   //修改总体选项的样式 最外层
//   /deep/ .el-select-dropdown{
//     background-color: #08164d;
//     margin: 0px;
//     border:0px;
//     border-radius: 0px;
//   }

//   //修改单个的选项的样式
//   /deep/ .el-select-dropdown__item{
//     background-color: transparent;
//     color:#fff;
//   }

//   //item选项的hover样式
//   /deep/ .el-select-dropdown__item.hover,
//   /deep/ .el-select-dropdown__item:hover{
//     color:#409eff;
//   }

//   //修改的是下拉框选项内容上方的尖角
//   /deep/ .el-popper .popper__arrow, .el-popper .popper__arrow::after{
//     display: none;
//   }
// }
/deep/.certificateWarning-tab{
  width: 100%;
  height: 41vh;
  .el-table__body-wrapper::-webkit-scrollbar{
     /*width: 0;宽度为0隐藏*/
    width: 0px !important;
  }
}
.certificateWarning-tab /deep/ .el-table{
    color: #F7F7F7;
    border-spacing: 0px !important;
    border-bottom: 0px !important;
}
.certificateWarning-tab /deep/{
.has-gutter{
    border-spacing: 0px !important;
}
}
/deep/.certificateWarning-tab {
.el-table__row--striped{
  background: rgba(67, 203, 225, 1) !important;
  // opacity: 0.5;
}
}
 /deep/ .el-table tbody tr { pointer-events:none; }
.certificateWarning-tab /deep/ .table{
  border-spacing: 0px !important;
}
.certificateWarning-tab /deep/ .gutter{
  width: 0px!important;
  background-color: transparent!important;
}
.certificateWarning-tab /deep/ .el-table__header-wrapper{
  background-color: transparent;
  color: #40CDF1;
}
.certificateWarning-tab /deep/  .el-table, .el-table__expanded-cell {
    background-color: transparent;
}

.certificateWarning-tab /deep/ .el-table tr {
    background-color: transparent!important;
    // color:#40CDF1 !important;
}
.certificateWarning-tab /deep/ .el-table tr th{
    background-color: transparent!important;
    color:#40CDF1 !important;
}
.certificateWarning-tab /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
   background-color: transparent;
}
.certificateWarning-tab /deep/ .el-table td, .el-table th.is-leaf{
  border: none;
}
.certificateType-es /deep/ .el-table{
    color: #F7F7F7;
    border-spacing: 0px !important;
    border-bottom: 0px !important;
}
.certificateType-es /deep/{
.has-gutter{
    border-spacing: 0px !important;
}
}
.certificateType-es /deep/ .table{
  border-spacing: 0px !important;
}
.certificateType-es /deep/ .gutter{
  width: 0px!important;
  background-color: transparent!important;
}
.certificateType-es /deep/ .el-table__header-wrapper{
  background-color: transparent;
  color: #40CDF1;
}
.certificateType-es /deep/  .el-table, .el-table__expanded-cell {
    background-color: transparent;
}

.certificateType-es /deep/ .el-table tr {
    background-color: transparent!important;
}
.certificateType-es /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
   background-color: transparent;
}
.certificateType-es /deep/ .el-table td, .el-table th.is-leaf{
  border: none;
}


.el-table::before {//去除底部白线
	 left: 0;
	 bottom: 0;
	 width: 100%;
	 height: 0px;
}
.kind-s{
  height: 4vh;
  // width: 100%;
  float: left;
  display: flex;
  width: 30%;
  // background-color: aqua;
  // justify-content:center;
  align-items:center;
  // padding-left: 23px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  .biaoshi{
    width: 5px;
    height: 4vh;
    margin-right: 10px;
    background-color: #41D9E7;
  }
}
.qiehuan{
  height: 3vh;
  width: 100%;
  // background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  .qieuanone{
    width: 10%;
    height: 30%;
    float: left;
    background-color: #41D9E7;
  }
  .qieuanone-s{
    width: 10%;
    height: 30%;
    float: left;
    background-color: #41D9E7;
    opacity: 0.1;
  }
  .qiehuantou{
    width: 10%;
    height: 30%;
    float: left;
    margin-left: 3%;
    background-color: #41D9E7;
  }
  .qiehuantou-s{
    width: 10%;
    height: 30%;
    float: left;
    margin-left: 3%;
    background-color: #41D9E7;
    opacity: 0.1;
  }
}
.certificateState{
  margin-top: 4px;
  width: 28%;
  float: right;
  margin-right: 10px;
  background-size: 100% 100%;
  height: 48vh;
}
.enterpriseState{
  margin-top: 4px;
  width: 28%;
  float: left;
  margin-right: 10px;
  height: 47vh;
}
.demo-buttom{
  width: 100%;
  height: 47.5vh;
}
.cost{
  width: 25%;
  float: left;
  margin-left: 15px;
  background-size: 100% 100%;
  height: 45vh;
}
.certificateWarning{
  width: 41%;
  float: left;
  // margin-top: 5px;
  // margin-left: 1.5%;
  margin-bottom: 5px;
  // margin-right: 1%;

  background-size: 100% 100%;
  height: 45vh;
}
.statistics{
  width: 28%;
  float: right;
  margin-top: 4px;
  margin-right: 10px;
  background-size: 100% 100%;
  height: 45vh;
}
  .zhengshutupian{
    width: 100%;
    height: 150px;
    margin-top: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .buttonText{
    color: #53b4ff;
  }
  .tupian{
    width: 100%;
    height: 69px;
    // text-align: center;
    img{
    width: 66px;
    height: 69px;
    // text-align: center;
    }
  }

  .dididi{
    margin-top: 8px;
  }
  .kaishi{
  margin-top: 5px;
  }
  .mod-demo-echarts {
    // height: 1700px;
    border: 0px !important;
    height: 100vh;
    width: 100%;
    // padding-bottom: 12px;
    background: url(~@/assets/img/bg.png);
    background-size:100% 100%;
    overflow: hidden !important;
    // margin-top: 10.5px;
    // > .el-alert {
    //   margin-bottom: 10px;
    // }
    // > .el-row {
    //   // margin-top: -10px;
    //   // margin-bottom: -10px;
    //   .el-col {
    //     // padding-top: 10px;
    //     // padding-bottom: 10px;
    //   }
    // }
  }
  .mod-demo-echartsee{
    border: 0px !important;
    height: 100vh;
    width: 100%;
    background: url(~@/assets/img/bg-se.png);
    background-size:100% 100%;
    overflow: hidden !important;
  }
  .anniu{
    // width: 100%;
    // margin-bottom: 30px;
    height: 30px;
    // float: right;
  }
  .zhengce{
    margin-bottom: 15px;
  }
  .chart-tive{
    height: 100%;
    padding: 6px;
  }
  .sangeyue{
    float: right;
    // color: #000;
    // :hover{
    // color: #53b4ff;
    // }
  }
  .yidaoqi{
    margin-right: 10px;
    margin-left: 10px;
    float: right;
  }
  .yigeyue{
    // margin-right: 10px;
    float: right;
    // color: #000;
    // :hover{
    // color: #53b4ff;
    // }
  }
  .chart-box {
    // text-align: center;
      padding: 10px;
      height: 180px;
  }
  .chart-boos{
    height: 100%;
  }
  .div-boos{
    height: 100%;
    overflow: hidden !important;
    overflow-y: auto !important;
  }
  .title{
    float: left;
    font-size:18px;
    color:#333333;
  }
  // .rukutitle{
  //   float: left;
  //   height: 20px;
  //   font-size:18px;
  //   margin-bottom: 1px;
  //   color:'#333333';
  // }
  .delete{
    width:120px;
    height:120px;
    position: relative;
    top: -10px;
    right: -10px;
    float: right;
    z-index: 4;
  }
  .iconzhengshucopy{
    color: #ed6055;
  }
  .iconrenshizonghe{
    color: #39bc8b;
  }
  .icon {
    display: block;
    height: 100px;
    line-height: 100px;
    font-size: 78px;
    text-align: center;
    margin: 10px auto;
    -webkit-transition: font-size 0.25s linear, width 0.25s linear;
    -moz-transition: font-size 0.25s linear, width 0.25s linear;
    transition: font-size 0.25s linear, width 0.25s linear;
  }
  .center-box{
    display: inline-block;
    margin: auto;
    position: relative;
    top: -80px;
    text-align: center;
  }
  .center-yanqi{
    height: 100%;
    // background-color: aqua;
  }
  .tipApan{
    color: #999999;
    font-size:14px;
  }
   .chart-container {
        width: 100%;
        float: left;
    }
    /deep/.el-table td, /deep/.el-table th.is-leaf {
      border: none!important;
    }
    .div-To{
      width: 100%;
    }
    .div-Bt{
      width: 100%;
    }

    .msg-container{
      width: 100%;
      height: 318px;
      overflow: auto;
      // padding: 24px;
      .msg-item{
        width: 100%;
        height: 90px;
        padding: 24px 28px;
        background-color: #FAFAFA;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        .msg-content{
          width: 100%;
          display: flex;
          flex-direction: column;
          .title{
            color: #303133 ;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 8px;
            padding-right: 35px;
          }
          .other{
            font-size: 14px;
            color: #8C8C8C;
          }
        }
        .msg-detail{
          cursor: pointer;
        }
      }

    }
</style>
